import Vue from "vue";
import DesignResource from "@/utils/DesignResource.js";
// import DesignEditor from "@/utils/DesignEditor.js";

export default new Vue({
    data() {
        return {
            scale: 1,
            modelWarp: null,
            pieceWarp: null,
            pieces: [],
            models: [],
            activeSurface: null,
            activeModel: null,
            render: {},
            inited: false,
        };
    },
    methods: {
        init(design) {
            const pieces = design.pieces || [];
            const models = design.models || [];
            const colors = design.colors || [];
            const isedit = !!design.isedit;
            const promises = [];
            const option = {
                type: "simple",
                form: "managger",
            };

            promises.push(DesignResource.loadFont("Arial", option));

            // 加载线框图
            pieces.map((piece) => {
                if (piece.mask_image) {
                    promises.push(
                        DesignResource.loadImage(piece.mask_image, option)
                    );
                }
                piece.layers.map((layer) => {
                    if (layer.type == "image" && layer.url) {
                        const option = {
                            type: "simple",
                            form: "materials",
                        };
                        promises.push(
                            DesignResource.loadImage(layer.url, option)
                        );
                    }
                });
            });

            // 加载全部模特图
            models.map((item) => {
                const model_color = JSON.parse(item.model_color || "{}");
                Object.keys(model_color).map(
                    (key) =>
                        model_color[key] &&
                        DesignResource.loadImage(model_color[key], option)
                );
                promises.push(
                    DesignResource.loadImage(item.mask_image, option)
                );
            });

            colors.map((item) => {
                if (item.bg_front) {
                    promises.push(
                        DesignResource.loadImage(item.bg_front, option)
                    );
                }
                if (item.bg_back) {
                    promises.push(
                        DesignResource.loadImage(item.bg_back, option)
                    );
                }
            });

            // 二次编辑
            if (isedit) {
                promises.push(DesignResource.loadAllFont());
            }

            return Promise.all(promises);
        },

        // 清空数据
        cleanall() {
            // this.pieces = [];
            // this.models = [];
            // this.pieces.map((piece) => {
            //     if (piece.layers.length > 0) {
            //         piece.layers.splice(0, piece.layers.length);
            //         this.updatePiece(piece);
            //     }
            // });
        },

        // 更新图层
        updatePieceState(state) {
            this.$emit("update", state);
        },

        // // 加载资源
        // loadResource() {
        //     if (!this.inited) {
        //         // 加载全部字体
        //         // fontsJson.map(item => DesignResource.loadFont(item.name));
        //         // 加载设计面的图
        //         this.pieces.map((item) =>
        //             DesignResource.loadImage(item.mask_image, {
        //                 type: "simple",
        //                 form: "managger",
        //             })
        //         );
        //         // 加载全部模特图
        //         this.models.map((item) =>
        //             DesignResource.loadImage(item.mask_image, {
        //                 type: "simple",
        //                 form: "managger",
        //             })
        //         );
        //         // 初始化完成
        //         this.inited = true;
        //     }
        // },

        // // 缩放大小
        // getScale() {
        //     if (this.pieceWarp && this.modelWarp) {
        //         const surface = this.activeSurface;
        //         const model = this.activeModel;
        //         const surfaceRect = this.pieceWarp.getBoundingClientRect();
        //         const modelRect = this.modelWarp.getBoundingClientRect();

        //         const surfaceScale = Math.max(
        //             surfaceRect.width / surface.outer_width,
        //             surfaceRect.height / surface.outer_height
        //         );
        //         const modelScale = Math.max(
        //             surfaceRect.width / model.outer_width,
        //             surfaceRect.height / model.outer_height
        //         );

        //         this.scale = 2 * Math.max(surfaceScale, modelScale);
        //     } else {
        //         this.scale = 1;
        //     }
        // },

        // // 变更视图
        // changeView(activeSurface = {}, activeModel = {}) {
        //     const pieceObject = Object.fromEntries(
        //         this.pieces.map((i) => [i.canvas_name, i])
        //     );
        //     const surfacePieces = activeSurface.pieces || [];
        //     const modelPieces = activeModel.mapping || [];
        //     const selectPieces = {};

        //     const promises = [];

        //     surfacePieces.concat(modelPieces).map((item) => {
        //         if (!item.canvas_name) {
        //             // 没有名称
        //         } else if (!pieceObject[item.canvas_name]) {
        //             // 没有设计面
        //         } else if (selectPieces[item.canvas_name]) {
        //             // 已经选中
        //         } else {
        //             selectPieces[item.canvas_name] =
        //                 pieceObject[item.canvas_name];
        //         }
        //     });

        //     this.activeSurface = activeSurface;
        //     this.activeModel = activeModel;
        //     this.getScale();

        //     Object.values(selectPieces).map((item) => {
        //         promises.push(this.updatePiece(item));
        //     });

        //     return Promise.all(promises);
        // },

        // // 更新
        // updatePiece(piece) {
        //     let render = this.render[piece.canvas_name];
        //     let cache = JSON.stringify(piece);

        //     if (render && this.scale == render.scale && cache == render.cache) {
        //         // 数据相同，且已经完成
        //         // this.updatePieceStage(render);
        //         if (render.status == "complete") {
        //             // 已经完成
        //             return Promise.resolve();
        //         } else {
        //             // 正在进行中
        //             return new Promise((resolve) => {
        //                 render.loops.push((e) => resolve());
        //             });
        //         }
        //     } else if (render && this.scale == render.scale) {
        //         // 尺寸相同
        //         // 更新图层的数据
        //         return new Promise((resolve) => {
        //             render.cache = cache;
        //             render.loops.push((e) => resolve());
        //             render.editor.renderLayers(piece.layers).then((e) => {
        //                 render.loops.map((cb) => cb());
        //                 render.loops = [];
        //             });
        //         });
        //     } else {
        //         let option = {
        //             canvas_name: piece.canvas_name,
        //             canvas_scale: this.scale,
        //             canvas_model: "simple",
        //             canvas_width: piece.canvas_width,
        //             canvas_height: piece.canvas_height,
        //             design_layers: [],
        //             onUpdate: (fabric) => {
        //                 const state = {
        //                     canvas_name: piece.canvas_name,
        //                     canvas: fabric.lowerCanvasEl,
        //                     fabric: fabric,
        //                     layers: piece.layers.slice(0),
        //                 };
        //                 this.$emit("update", state);
        //             },
        //         };

        //         // piece在当前Surface中才展示，不在时，则关闭
        //         if (!render) {
        //             render = {
        //                 canvas_name: piece.canvas_name,
        //                 piece: piece,
        //                 cache: cache,
        //                 status: "",
        //                 loops: [],
        //                 scale: this.scale,
        //                 editor: new DesignEditor(null, option),
        //             };
        //             this.render[piece.canvas_name] = render;
        //             return render.editor.renderLayers(piece.layers);
        //         } else {
        //             // 改变了大小
        //             return new Promise((resolve) => {
        //                 option.design_layers = piece.layers;

        //                 render.scale = this.scale;
        //                 render.cache = cache;
        //                 render.loops.push((e) => resolve());
        //                 render.editor.reset(option).then((e) => {
        //                     render.loops.map((cb) => cb());
        //                     render.loops = [];
        //                 });
        //             });
        //         }
        //     }
        // },

        // // 请求回调
        // getPiecesState(pieces, callback) {
        //     // 如果有，则返回，如果没有则加载
        //     let result = [];
        //     pieces.map((piece) => this.updatePiece(piece));
        //     callback && callback(result);
        // },
    },
});
